<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">Count组件的求和为：{{ sum }}</h3>
    <h3>列表中第一个人的名字是：{{ firstPerson }}</h3>

    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <ul>
      <li v-for="person in personList" :key="person.name">{{ person.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Person",
  data() {
    return {
      name: ''
    }
  },
  computed: {
    personList() {
      // 1：自己引入时，也要中间加一层使用的模块
      return this.$store.state.personAbout.personList
    },
    sum() {
      return this.$store.state.countAbout.sum
    },
    firstPerson() {
      // 3：注意，getters的获取格式必须是这样，
      // 并且因为.和/冲突，所以只能用字符串形式获取对象
      return this.$store.getters['personAbout/firstPersonName']
    }
  },
  methods: {
    add() {
      const personObj = { id: Math.random().toString(36), name: this.name }
      console.log(personObj)

      // 2：自己方法调用时，遵循Vuex模块的规范，使用 / 指定模块方法（底层会检测有没有/，然后获取分类）
      // commit直接联系mutation (第二步)
      this.$store.commit('personAbout/ADD_PERSON', personObj)
      this.name = ''
    },
    addWang() {
      const personObj = { id: Math.random().toString(36), name: this.name }

      // 4：同样需要特殊格式调用模块下的方法
      // 联系action做前置处理
      this.$store.dispatch('personAbout/addPersonWang', personObj)
      this.name = ''
    }
  }

};
</script>

<style>
bottom {
  margin-left: 5px;
}
</style>
